<template>
  <div id="mainmenu">
    <div>
      <div class="menu-item">
        <el-badge :value="3" class="item" type="primary">
          <img class="menu-item-bg" src="../assets/img/menu-jiaohao.png" alt="" />
        </el-badge>
      </div>
      <div class="menu-item" @click="common.toSecondPage('/tabulation/already', '办理查询')">
        <el-badge :value="1" class="item">
          <img class="menu-item-bg" src="../assets/img/menu-chaxun.png" alt="" />
          <div class="menu-hover">办理查询</div>
        </el-badge>
      </div>
      <div class="menu-item" @click="common.toSecondPage('/tabulation/waithander', '待办列表')">
        <el-badge :value="12" class="item" type="warning">
          <img class="menu-item-bg" src="../assets/img/menu-jieshou.png" alt="" />
          <div class="menu-hover">待办列表</div>
        </el-badge>
      </div>
      <div class="menu-item" @click="common.toSecondPage('/tabulation/statistics', '统计报表')">
        <img class="menu-item-bg" src="../assets/img/menu-fenxi.png" alt="" />
        <div class="menu-hover">统计报表</div>
      </div>
      <!--            <el-popover-->
      <!--                    placement="left-start"-->
      <!--                    width="150"-->
      <!--                    popper-class="menulistout"-->
      <!--                    trigger="hover">-->
      <!--                <el-button class="menu-item" slot="reference">-->
      <!--                    <img class="menu-item-bg" src="../assets/img/menu-jieshou.png" alt="">-->
      <!--                </el-button>-->
      <!--            </el-popover>-->
    </div>
  </div>
</template>

<script>
  export default {
    name: 'MainMenu',
    data() {
      return {};
    },
    methods: {}
  };
</script>

<style lang="scss" scoped>
  #mainmenu {
    position: fixed;
    right: 40px;
    bottom: 30%;
    .menu-item:hover {
      img {
        transition: all 0.2s;
        -webkit-transform: translateX(-5px) translateZ(0px) translateY(0px) scale(1.1);
      }
    }
    .menu-item {
      width: 50px;
      border-radius: 15px;
      height: 50px;
      cursor: pointer;
      margin-top: 20px;
      padding: 0;
      border: 0;
      background: none;
      position: relative;
      img {
        transition: all 0.2s;
        -webkit-transform: translateX(0px) translateZ(0px) translateY(0px) scale(1);
      }
      .menu-item-bg {
        width: 100%;
        height: 100%;
      }
      .menu-hover {
        position: absolute;
        display: none;
      }
    }
  }
</style>
